<template>
    <div>
        <div id="BDMap" ref="BDMap">
            <baidu-map
                class="map"
                :center="center"
                :zoom="zoom"
                :scroll-wheel-zoom="true"
                :double-click-zoom="true"
                @ready="mapReady"
                mapType="BMAP_SATELLITE_MAP"
            >
                <!-- @dragstart="dragStartHandler" -->
                <!-- @dragend="dragendHandler" -->
                <!-- @zoonstart="zoomStartHandler" -->
                <!-- @zoomend="zoomEndHandler" -->
                <!-- :mapStyle="mapStyle" -->
                <!-- :dragging="false" -->
                <bm-marker
                    v-for="(item, index) in positionList"
                    :key="index"
                    :position="{ lng: item[0], lat: item[1] }"
                    :icon="{
                        url: getGifSpot(item[2]),
                        size: { width: 60, height: 60 },
                    }"
                    @click="handleClick(item[2])"
                    @mouseover="mouseoverHandler($event, item[2])"
                    @mouseout="mouseoutHandler($event, item[2])"
                >
                </bm-marker>
            </baidu-map>
        </div>
    </div>
</template>

<script>
// 引入散点组件
// import Spot from './Spot'
import { getAll } from '@/api/api'

export default {
    data () {
        return {
            active: false,
            center: { lng: 103.379515, lat: 23.132099 },
            zoom: 10,
            positionList: [
                // [113.363426, 23.13451],
                // [113.373703, 23.134577],
                // [113.37011, 23.121416],
                // [113.381177, 23.125404],
                // [113.361127, 23.119289],
                // [113.396268, 23.13697],
                // [113.39095, 23.125205],
                // [113.382542, 23.118558],
                // [113.400221, 23.14561],
                // [113.376937, 23.143483],
                // [113.392388, 23.110181]
            ],
            spotList: [
                // {
                //     status: 'red',
                //     left: 869,
                //     top: 478
                // }
            ],
            dragPos: { // 拖拽偏移量
                startX: 0, // 初始横轴偏移量
                startY: 0, // 初始纵轴偏移量
                offsetX: 0, // 横坐标偏移量
                offsetY: 0 // 纵坐标偏移量
            },
            allList: [],
        }
    },
    methods: {
        median (arr) { //获取中间值
            const mid = Math.floor(arr.length / 2),
                nums = [...arr].sort((a, b) => a - b);
            return arr.length % 2 !== 0 ? Number(nums[mid]) : (Number(nums[mid - 1]) + Number(nums[mid])) / 2;
        },
        getMapData () {
            return getAll()
                .then(resData => {
                    if (resData.status == 200 && resData.data.code == 2000) {
                        this.allList = resData.data.list
                        let positionList = []
                        resData.data.list.forEach(item => {
                            item.baidu_gps != "0,0" && positionList.push(item.baidu_gps.split(',').concat(item))
                        })
                        this.positionList = positionList

                        let lngArr = []
                        let latArr = []
                        this.positionList.forEach(item => {
                            // item[0] != "0" && lngArr.push(item[0])
                            // item[1] != "0" && latArr.push(item[1])
                            item[0] != "0" && lngArr.push(Number(item[0]))
                            item[1] != "0" && latArr.push(Number(item[1]))
                        })

                        // let lng = this.median(lngArr)
                        // let lat = this.median(latArr)

                        lngArr = lngArr.sort((a, b) => { return a - b })
                        latArr = latArr.sort((a, b) => { return a - b })

                        let centerLangtitude = (lngArr[0] + lngArr[lngArr.length - 1]) / 2
                        let centerLantitude = (latArr[0] + latArr[latArr.length - 1]) / 2

                        // this.center.lng = lng
                        // this.center.lat = lat
                        this.center.lng = centerLangtitude
                        this.center.lat = centerLantitude

                    }
                })
        },
        mapReady (BMap, map) { // 地图Ready回调
            this.getMapData().then(_ => {
                /* 正常: green;    预警:orange;    超标:red; */
                // let _status = ['blue', 'green', 'orange', 'red', 'gray'];
                this.$nextTick(() => {
                    this.$emit('mapReady', this.allList)
                })
            })
        },
        handleClick (item) { // 点击散点显示提示框
            let chosenSpot = {
                class: item.monitoring_status == 0 ? 'gray' : item.soot <= 0.8 ? `green` : item.soot > 0.8 && item.soot < 1 ? 'orange' : 'red',
                status: item.monitoring_status == 0 ? '离 线' : item.soot <= 0.8 ? `正 常` : item.soot > 0.8 && item.soot < 1 ? '预 警' : '超 标',
                name: item.company_name, // 公司名称
                addr: item.address, // 地址
                code: item.devices_id, // 邮编
                phone: `${item.phone}(${item.contacts})`, // 电话
                size: item.scale == 's' ? '小' : item.scale == 'm' ? '中' : '大', // 企业规模
                category: (function (val) {
                    let cuisine = '';
                    switch (val) {
                        case '1':
                            cuisine = '鲁菜'
                            break;
                        case '2':
                            cuisine = '川湘菜'
                            break;
                        case '3':
                            cuisine = '粤菜'
                            break;
                        case '4':
                            cuisine = '淮扬菜'
                            break;
                        case '5':
                            cuisine = '西餐'
                            break;
                        case '6':
                            cuisine = '烧烤'
                            break;
                        case '7':
                            cuisine = '快餐'
                            break;
                        case '8':
                            cuisine = '其它'
                            break;
                        default:
                            cuisine = '其它';
                            break;
                    }
                    return cuisine
                }(item.cuisine)), // 菜系
                level: item.monitoring_level == 'g' ? '一般' : item.monitoring_level == 'p' ? '重点' : '-', // 监控级别
                soot: item.soot, // 油烟浓度
                keliwu: item.particulate || '0.00', // 颗粒物浓度
                feijiawan: item.non_methane || '0.00', // 非甲烷总烃
                jiankongyi: item.monitoring_status == 1 ? '在线' : '离线', // 监控仪状态
                jinghuaqi: item.purifier_status == 1 ? '开启' : '关闭', // 净化器状态
                fengshan: item.fen_status == 1 ? '开启' : '关闭', // 排风机状态
            }
            this.$parent.mapTipShow = true
            this.$parent.currentChosenSpot = chosenSpot
        },
        mouseoverHandler (e, item) { // 鼠标移入
            let curClass = item.monitoring_status == 0
                ? 'gray'
                : item.soot <= 0.8
                    ? `green`
                    : item.soot > 0.8 && item.soot < 1
                        ? 'orange'
                        : 'red';
            e.target.V.classList.add(curClass)
        },
        mouseoutHandler (e, item) { // 鼠标移出
            let curClass = item.monitoring_status == 0
                ? 'gray'
                : item.soot <= 0.8
                    ? `green`
                    : item.soot > 0.8 && item.soot < 1
                        ? 'orange'
                        : 'red';
            e.target.V.classList.remove(curClass)
        },
        getGifSpot (item) { // 根据状态返回不同的GIF散点图
            return item.monitoring_status == 0
                ? '../../../../static/images/aaa/offline.gif'
                : item.soot <= 0.8
                    ? `../../../../static/images/aaa/normal.gif`
                    : item.soot > 0.8 && item.soot < 1
                        ? '../../../../static/images/aaa/exceed.gif'
                        : '../../../../static/images/aaa/warn.gif';
        }
    },
    mounted () {

    }
}
</script>

<style lang="less" scoped>
/* 地图的父组件不要用tranform:translate; 否则会发生缩放中心点偏移的问题 */
#BDMap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    .map {
        width: 100%;
        height: 100%;
        // filter: grayscale(1) opacity(0.3);
    }
}
#BDMap::before { // 左侧阴影
    content: "";
    width: 30%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 3;
}
#BDMap::after { // 右侧阴影
    content: "";
    width: 30%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 3;
}
</style>